<template>
    <div>
        <header>
            <input type="text" placeholder="请输入内容/商品名称">
        </header>
        <div class="swiper">
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.uc1WMWsghuusfhFKjAzBpAHaCU?w=350&h=109&c=7&r=0&o=5&dpr=1.6&pid=1.7"
                alt="">
        </div>
        <div class="content">
            <p>猜你喜欢</p>
            <div class="liebiao">
                <span>综合排序</span>
                <span @click="near">距离最近</span>
                <span @click="high">销量最高</span>
                <span>筛选</span>
            </div>
            <div class="remai">
                <div>年货节热点</div>
                <div>津贴联盟</div>
                <div>满减优惠</div>
                <div>品质联盟</div>
            </div>
        </div>
        <main>
            <div class="list" v-for="(item, index) in list || tankList2 ? list || tankList2 : tankList"  :key="index">
                <div class="listleft">
                    <img :src="item.picUrl" alt="">
                </div>
                <div class="listright">
                    <font>{{ (item.name) }}</font>
                    <div class="listdown">
                        <p>{{ item.distance }}</p>
                        <p>{{ item.monthSalesTip }}</p>
                    </div>
                </div>
            </div>
        </main>

    </div>
</template>
<script>
import { shop_list } from '../../api/index'
export default {
    data() {
        return {
            tankList: null,
            tankList2:null,
            list: null,
        }
    },
    mounted() {
        shop_list({}).then((res) => {
            this.tankList = res.data.list
        })
    },
    methods:{
    near(){
       for (var j = 0; j < this.tankList.length - 1; j++) {
        for (var i = 0; i < this.tankList.length - j - 1; i++) {
          if (
            parseFloat(this.tankList[i].distance) >
            parseFloat(this.tankList[i + 1].distance)
          ) {
            var temp = this.tankList[i];
            this.tankList[i] = this.tankList[i + 1];
            this.tankList[i + 1] = temp;
          }
        }
      }
      this.tankList2 = null;
      this.list = this.tankList;
    },
    high(){
      for (var j = 0; j < this.tankList.length - 1; j++) {
        for (var i = 0; i < this.tankList.length - j - 1; i++) {
          if (
            parseFloat(this.tankList[i].monthSalesTip.slice(2)) <
            parseFloat(this.tankList[i + 1].monthSalesTip.slice(2))
          ) {
            var temp = this.tankList[i];
            this.tankList[i] = this.tankList[i + 1];
            this.tankList[i + 1] = temp;
          }
        }
      }
      this.list = null;
      this.tankList2 = this.tanklist;
    }
  }

}
</script>

<style scoped>
header {
    height: 40px;
    width: 100%;
    text-align: center;
    background-color: rgb(57, 192, 246);
}

header input {
    width: 90%;
    height: 25px;
    text-align: center;
    border-radius: 17px;
    margin-top: 8px;
    border: none;
}

main{
    height: 500px;
    width: 100%;
    overflow: auto;
}
.swiper {
    width: 100%;
    height: 100px;
    margin-top: 10px;
}

.swiper img {
    width: 100%;
    height: 100%;
}

.content p {
    text-align: left;
    font-size: 16px;
    font-weight: 700;
}

.liebaio {
    display: flex;
    justify-content: space-between;
}

.liebiao span {
    font-size: 14px;
    padding-right: 8px;
    font-weight: 700;
}

.liebiao span.active{
    color: red;
}

.remai {
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.remai div {
    height: 30px;
    width: 23%;
    /* border: 1px solid rgb(153, 153, 153); */
    background-color: #e9e7e7;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
}

.list {
    width: 100%;
    height: 120px;
    display: flex;
    /* background-color: antiquewhite; */
    margin-top: 10px;
    /* overflow: auto; */
}

.listleft {
    width: 35%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
}

.listleft img {
    width: 80%;
    margin-top: 20px;
}

.listright {
    width: 65%;
    height: 100%;
    box-sizing: border-box;
}

.listright font {
    font-weight: 700;
    font-size: 16px;
    margin-top: 10px;
}

.listdown {
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
    box-sizing: border-box;
}

.listdown p {
    margin-right: 10px;
    font-size: 12px;
}
</style>